<template>
    <div>
<!-- 轮播图 -->
<div>
        <swiper ref="mySwiper" :options="swiperOptions">
    <swiper-slide>
        <img class="w-100" src="../assets/img/1.jpeg" alt="">
        </swiper-slide>
    <swiper-slide>
        <img class="w-100" src="../assets/img/2.jpeg" alt="">
        </swiper-slide>
        <swiper-slide>
        <img class="w-100" src="../assets/img/3.jpeg" alt="">
        </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
  </div>

  <!-- 精灵图部分 -->
  <div class="nav-icons text-grey-1 mt-3 text-center pt-3 bg-white">
     <div class="d-flex flex-wrap" :class="{nowrap:iconindex === 0}">
          <a href="//pvp.qq.com/m/m201706/coming/index.htm" class="nav-item mb-3">
          <i class="sprite sprite-news"></i>
          <div class="py-2">爆料的站</div>
        </a>
      <a href="//pvp.qq.com/act/a20160510story/index.htm?ADTAG=PC.QrCode.TG" class="nav-item mb-3">
          <i class="sprite sprite-new"></i>
          <div class="py-2">故事站</div>
      </a>
      <a href="//pvp.qq.com/mall/m" class="nav-item mb-3">
          <i class="sprite sprite-market"></i>
          <div class="py-2">周边商城</div>
      </a>
      <a href="//pvp.qq.com/cp/a20161116tyf/page01.htm" class="nav-item mb-3">
          <i class="sprite sprite-attempt"></i>
          <div class="py-2">体验服</div>
      </a>
      <a href="//pvp.qq.com/m/m201606/goCenter.shtml"  v-if="iconindex" class="nav-item mb-3">
          <i class="sprite sprite-newman"></i>
          <div class="py-2">新人专区</div>
      </a>
      <a href="https://pvp.qq.com/m/memory/index.shtml"  v-if="iconindex" class="nav-item mb-3">
          <i class="sprite sprite-honor"></i>
          <div class="py-2">荣耀 传承</div>
      </a>
      <a href="//image.ttwz.qq.com/wzry/wzryzs_download_4001.htm?ADTAG=mpvp.qq.com"  v-if="iconindex" class="nav-item mb-3">
          <i class="sprite sprite-home"></i>
          <div class="py-1">王者营地</div>
      </a>
      <a  v-if="iconindex" href="//game.weixin.qq.com/cgi-bin/comm/openlink?noticeid=90102708&appid=wx95a3a4d7c627e07d&url=https%3A%2F%2Fgame.weixin.qq.com%2Fcgi-bin%2Fh5%2Fstatic%2Fsubscribe%2Findex.html%3Fappid%3Dwx95a3a4d7c627e07d#wechat_redirect" class="nav-item mb-3">
          <i class="sprite sprite-wx"></i>
          <div class="py-2">公众号</div>
      </a>
      <a  v-if="iconindex" href="//pvp.qq.com/cp/a20190320bbgxsmm/index.html" class="nav-item mb-3">
          <i class="sprite sprite-banben"></i>
          <div class="py-2">版本介绍</div>
      </a>
      <a  v-if="iconindex" href="//pvp.qq.com/cp/a20190917station/index.html" class="nav-item mb-3">
          <i class="sprite sprite-idea"></i>
          <div class="py-1">对局环境</div>
      </a>
      <a  v-if="iconindex" href="//pvp.qq.com/cp/a20210428ipgc" class="nav-item mb-3">
          <i class="sprite sprite-fun"></i>
          <div class="py-1">IP共创计划</div>
      </a>
      <a  v-if="iconindex" href="//pvp.qq.com/m/hdy/p1/index.html" class="nav-item mb-3">
          <i class="sprite sprite-if"></i>
          <div class="py-2  ">创意互动营</div>
      </a>
     </div>
     <div class="fs-sm py-2 bg-light" @click="foldIcon">
         <i class="sprite sprite-arrow mr-1" :class="{down:!iconindex}"></i>
         <i>{{iconindex?'展开':'收起'}}</i>
     </div>
  </div>
    <!--卡片组件 -->
    <!-- 新闻资讯卡片组件 -->
    <m-cardlist icon = 'Menu' title="新闻资讯" :categories = 'newscats'>
        <template #item = '{category}'>
            <router-link
            tag="div" :to="`/articles/${news._id}`" class="py-2 fs-lg d-flex" v-for="(news,n) in category.newslist" :key="n">
                    <span class="text-info">[{{news.categoryName}}]</span>
                    <span class="px-2">|</span>
                    <span class="text-overflow flex-1 text-dark-1">{{news.title}}</span>
                    <span class="text-grey-1 fs-sm">{{news.createdAt | date}}</span>
                </router-link>
        </template>
    </m-cardlist>

<!-- 英雄列表卡片组件 -->
     <m-cardlist icon = 'Menu' title="英雄列表" :categories = 'heroescats'>
        <template #item = '{category}'>
            <div class="d-flex flex-wrap" style="margin:0 -0.5rem;">
                <router-link tag="div" :to="`/heroes/${heroes._id}`" class="p-2 text-center"  style="width:20%;" v-for="(heroes,n) in category.herolist" :key="n">
                        <img :src="heroes.avater" class="w-100">
                        <span>{{heroes.name}}</span>
                </router-link>
            </div>
        </template>
    </m-cardlist>

<!-- 视频列表卡牌组件 -->
  <m-cardlist icon = 'Menu' title="英雄列表" :categories = 'videos'>
      <template #item = '{category}'>
            <div class="d-flex flex-wrap video" style="margin:0 -0.5rem;">
                        <a class="p-3" href="//pvp.qq.com/m/m201606/detail.shtml?G_Biz=18&tid=755124&e_code=pvpweb_m.statictypenew.type0">
                            <img src="../assets/img/shiping1.png" class="w-100" alt="">
                            <div style="width:100px" class="text-overflowed p-2">【法王的荣耀】第五期：中路选人思路与分析</div>
                     </a>
                     <a class="p-3" href="//pvp.qq.com/m/m201606/detail.shtml?G_Biz=18&tid=755124&e_code=pvpweb_m.statictypenew.type0">
                            <img src="../assets/img/shiping2.png" class="w-100"  alt="">
                            <div  style="width:100px" class="text-overflowed p-2">【马菠萝奇闻录】第19期：游戏音乐如何在潜移默化中影响心态</div>
                     </a>
                      <a class="p-3" href="//pvp.qq.com/m/m201606/detail.shtml?G_Biz=18&tid=755124&e_code=pvpweb_m.statictypenew.type0">
                            <img src="../assets/img/shiping3.png" class="w-100"  alt="">
                            <div  style="width:100px" class="text-overflowed p-2">【马菠萝奇闻录】第19期：不同局势下游戏音乐的变化切换</div>
                     </a>
                      <a class="p-3" href="//pvp.qq.com/m/m201606/detail.shtml?G_Biz=18&tid=755124&e_code=pvpweb_m.statictypenew.type0">
                            <img src="../assets/img/shiping4.png" class="w-100"  alt="">
                            <div  style="width:100px" class="text-overflowed p-2">【马菠萝奇闻录】第19期：游戏音效是如何触发产生的？</div>
                     </a>
            </div>
        </template>
    </m-cardlist>

    </div>
</template>

<script>
import dayjs from 'dayjs'/* 用于日期格式化到自己想要的格式 */
export default {
    name: 'VueHome',
    filters: {
      date(val){
          return dayjs(val).format('MM/DD')
      }
    },
     data() {
      return {
        swiperOptions: {
          pagination: {
            el: '.swiper-pagination'
          },
           autoplay:{
            delay:2500,
        }
        },
        newscats:[],
        heroescats:[],
        iconindex:1,
        videos:[{name:'精品栏目'},{name:'英雄攻略'},{name:'赛事精品'}],
        videosURL:["../assets/img/shiping1.png","../assets/img/shiping2.png","../assets/img/shiping3.png","../assets/img/shiping4.png"]
      }
    },
    methods: {
        async fetchnewshttp(){
            const res = await this.$http.get('news/list')
            this.newscats = res.data
            console.log(this.newscats);
        },
        async fetchherohttp(){
            const res = await this.$http.get('heroes/list')
            this.heroescats = res.data
        },
        foldIcon(){
            this.iconindex = !this.iconindex
        }
    },
    created() {
        this.fetchnewshttp()
        this.fetchherohttp()
    },

};
</script>

<style lang='scss' scoped>
.nav-icons{
    border-top: 1px solid #d4d0de;
    border-bottom: 1px solid #d4d0de;
    .nav-item{
        width: 25%;
        border-right: 1px solid #d4d0de;
        &:nth-child(4n){
            border-right: none;
        }
    }
}
.text-overflow{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}
.video{
    img{
        width: 150px;
        display: block;
    }
    .text-overflowed{
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}
.down{
    transform: rotateX(180deg)
}
</style>
